<template>
  <view>
    <uv-navbar title="定制" placeholder :autoBack="true"></uv-navbar>
    <view class="flex-col-ali swiper-item">
      <view class="text-main font-36 font-weight-bold m-y-30">请选择手串穿线</view>
      <view class="font-36 font-weight-bold m-t-86">{{ item.title }}</view>
      <view class="p-x-60 text-greey m-b-60 m-t-28 text-center">{{ item.brief }}</view>
      <view class="p-x-100 flex-wra tagBox">
        <view v-for="(it, indey) in item.colour" class="flex-col-ali" :key="index" @click="goPegas(it.color, it.name)">
          <uv-image :src="it.image" width="247rpx" height="247rpx" radius="12rpx"></uv-image>
          <view class="font-32 m-t-20 ">{{ it.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { CustomizeCenterApi } from '../../api/serves';
import { onLoad } from '@dcloudio/uni-app';
import { useCounter } from '@/mixins/userHooks';
const { getUserInfo, userInfo, isLogin, tool } = useCounter();
const item = ref([]);
const formData = ref({});
onLoad((options) => {
  formData.value = JSON.parse(options.formData);
});
const goPegas = async (color, name) => {
  console.log(color, name, userInfo.value.nickname, '================');
  let { type, circles_number, perimeter, height, weight } = formData.value;
  let obj = {};
  if (type == 1) {
    obj = {
      type,
      color,
      name,
      perimeter,
      circles_number
    };
  } else {
    obj = {
      type,
      color,
      name,
      height,
      perimeter,
      weight
    };
  }
  let { code, data, msg } = await CustomizeCenterApi.save_survey_data(obj);
  if (code != 1) return tool.alert(msg);
  uni.navigateTo({
    url: '/packageDiy/customized/customized?survey_id=' + data
  });
};
onMounted(() => {
  getCordList();
});
const getCordList = async () => {
  let { code, data, msg } = await CustomizeCenterApi.getCordList();
  if (code != 1) return tool.alert(msg);
  item.value = data;
};
</script>
<style>
page {
  background: linear-gradient(180deg, #fff3f4 0%, #f6f6f6 27.12%);
}
</style>
<style lang="scss">
.tagBox {
  gap: 35rpx 54rpx;

  view {
    color: #000;
    font-size: 28rpx;
  }
}

.swiperContent {
  width: 100%;
  height: calc(100vh - 360rpx);
}

.swiper-item {
  width: 100%;
  height: calc(100vh - 360rpx);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
